<template>
  <div class="info">
    <!-- 头部 -->
    <van-nav-bar left-arrow title="我的资料">
      <template #left>
        <i
          class="iconfont iconbtn_nav_back iconFont"
          @click="$router.go(-1)"
        ></i>
      </template>
    </van-nav-bar>
    <!-- 个人信息 -->
    <div class="main">
      <van-cell-group>
        <van-cell title="头像" is-link @click="$router.push('/editupload')">
          <template #default>
            <img class="myimg" :src="userInfo.avatar" alt="" />
          </template>
        </van-cell>
        <van-cell
          title="昵称"
          @click="$router.push('/editinfo?prototype=nickname')"
          is-link
          :value="userInfo.nickname"
        ></van-cell>
        <van-cell title="性别" is-link @click="gendershow = true">
          <template #default>
            <span v-if="userInfo.gender === 0">{{ genderList[0] }}</span>
            <span v-if="userInfo.gender === 1">{{ genderList[1] }}</span>
            <span v-if="userInfo.gender === 2">{{ genderList[2] }}</span>
          </template>
        </van-cell>
        <van-cell
          title="地区"
          is-link
          :value="areaList.city_list[userInfo.area]"
          @click="areashow = true"
        ></van-cell>
        <van-cell
          title="个人简介"
          is-link
          :value="userInfo.intro"
          @click="$router.push('/editinfo?prototype=intro')"
        ></van-cell>
      </van-cell-group>
    </div>
    <!-- 退出按钮 -->
    <div class="btn">
      <van-button type="danger" plain size="large" @click="tolayout"
        >退出登录</van-button
      >
    </div>
    <!-- 性别修改 -->
    <van-popup
      v-model="gendershow"
      position="bottom"
      :style="{ height: '40%' }"
      :close-on-click-overlay="false"
    >
      <van-picker
        title="标题"
        show-toolbar
        :columns="genderList"
        @confirm="saveGender"
        @cancel="gendershow = false"
        :default-index="userInfo.gender"
      />
    </van-popup>
    <!-- 地区修改 -->
    <van-popup
      v-model="areashow"
      position="bottom"
      :style="{ height: '40%' }"
      :close-on-click-overlay="false"
    >
      <van-area
        show-toolbar
        title="标题"
        :area-list="areaList"
        :columns-num="2"
        @cancel="areashow = false"
        :value="userInfo.area"
        @confirm="savearea"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { localRemove } from '@/utils/local.js'
import { apiEditInfo } from '@/api/au.js'
import areaList from '@/utils/area.js'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data () {
    return {
      genderList: ['未知', '男孩子', '女孩子'],
      gendershow: false,
      areashow: false,
      areaList: areaList
    }
  },
  methods: {
    // 退出登录
    tolayout () {
      this.$dialog
        .confirm({
          title: '警告',
          message: '你确定要退出吗？'
        })
        .then(() => {
          localRemove('token')
          this.$store.commit('setUserInfo', '')
          this.$router.push('/login')
        })
        .catch(() => {})
    },
    // 获取性别
    async saveGender (value, index) {
      this.gendershow = false
      this.$toast.loading({
        durations: 0
      })
      await apiEditInfo({ gender: index })
      this.$store.dispatch('setUserInfo')
      this.$toast.success('性别修改成功')
    },
    // 获取地址
    async savearea (data) {
      console.log(data)
      this.areashow = false
      this.$toast.loading({
        durations: 0
      })
      await apiEditInfo({ area: data[1].code })
      this.$store.dispatch('setUserInfo')
      this.$toast.success('地区修改成功')
    }
  }
}
</script>

<style lang="less">
.info {
  font-size: 12px;
  .iconFont {
    font-size: 44px;
  }
  .van-nav-bar__left {
    padding-left: 0;
  }
  .main {
    .myimg {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }
  .btn {
    margin: 0 15px;
    .van-button--danger {
      border: 1px solid #ccc;
    }
  }
}
</style>
